<!-- 我的福利 -->
<template>
	<view class="content pa">
		<view class="bg" v-for="(item, index) in list" :key="item.id" @tap.stop="welfare(item.id)">
			<image v-if="item.status" class="list" :src="item.img"></image>
		</view>
		<!-- 新用户福利 -->
		<newPeople v-if="isNewPeople && newCoupons.length" :newCoupons="newCoupons" @closeBtn="closeNew"
			@getNow="getNow"></newPeople>
		<!-- 限时特惠 -->
		<limitCard v-if="isLimitA && LimitACoupons.length" :LimitACoupons="LimitACoupons" @closeBtn="closeFit"
			@getNowA="getNowA" ref="limitCard"></limitCard>
		<!-- 限时福利 -->
		<limitCardB v-if="isFit && limitFits.length" :limitFits="limitFits" @closeBtn="closeBtn" @getNow="getNow"
			@seeMore="seeMore"></limitCardB>
		<!-- 空对象 -->
		<empty :null_data="null_data" v-if="!LimitACoupons.length && !newCoupons.length && !limitFits.length"></empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				//空状态
				null_data: {
					null_img: this.imgUrl + 'nocollect.png',
					text: '暂无福利~'
				},
				list: [{       // 福利列表
					id: 0,
					name: '新用户福利',
					img: this.imgUrl + 'newfitt.png',
					status: 0
				}, {
					id: 1,
					name: '限时福利',
					img: this.imgUrl + 'limitnewcoupon.png',
					status: 0
				}, {
					id: 2,
					name: '限时福利',
					img: this.imgUrl + 'limitnewfit.png',
					status: 0
				}],
				isNewPeople: false, // 新用户福利
				isLimitA: false, // 限时特惠
				isFit: false // 限时福利
			}
		},
		computed: {
			...mapState({
				newCoupons: state => state.init.newfit,             // 新用户福利
				LimitACoupons: state => state.init.LimitACoupons,   // 限时福利
				limitFits: state => state.init.limitFits            // 团购
			})
		},
		mounted() {
			// 判断是否有劵，追加上状态
			if (this.newCoupons.length) {
				this.list[0].status = 1
			}
			if (this.LimitACoupons.length) {
				this.list[1].status = 1
			}
			if (this.limitFits.length) {
				this.list[2].status = 1
			}
		},
		methods: {
			// 限时福利立即领取
			getNowA(index) {
				this.LimitACoupons[index].type = 1;
				this.$refs.limitCard.LimitACoupons[index].type = 1
				this.$api('baseExchangeBankCoupon', {
					coupon_key: this.LimitACoupons[index].key
				}).then(res => {
					this.$tools.toast('领取优惠券成功');
				})
			},
			// 新用户限时福利立即领取
			getNow(index) {
				this.$api('baseExchangeBankCoupon', {
					coupon_key: this.newCoupons[index].key
				}).then(res => {
					this.$tools.toast('领取优惠券成功');
					this.newCoupons[index].type = 1;
				})
			},
			// 查看更多
			seeMore() {
				this.$Router.push({
					path: '/pages/seller/group/index'
				})
			},
			// 根据传入的ID值，打开对应的弹窗信息
			/**
			 * 数据根据初始化获取
			 */
			welfare(id) {
				if (id == 0) {
					this.isNewPeople = true;
				};
				if (id == 1) {
					this.isLimitA = true;
				};
				if (id == 2) {
					this.isFit = true;
				}
			},
			// 关闭新用户福利窗口
			closeNew() {
				this.isNewPeople = false;
			},
			// 关闭限时特惠窗口
			closeFit() {
				this.isLimitA = false;
			},
			// 关闭限时特惠窗口
			closeBtn() {
				this.isFit = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
